<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>01-计算属性的使用</title>
    <link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="../VueJs/vue.js"></script>
    <style>
        .tips {
            width: 300px;
            padding: 20px;
            line-height: 32px;
            font-size: 26px;
        }
        button {
            outline: none !important;
        }
    </style>
</head>
<body>
    <!-- 
        总结：
            a. 当页面按钮修改某个数据，数据的值发生更新会被data监测到，从而更新dom，dom更新了methods中的方法在页面上使用时就会重新调用，浪费了性能
            b. 使用计算属性的写法，能有效解决问题
                    声明 computed ，跟 data 同级
                    内部的属性使用对象的方式声明，里面写 getter 和 setter
                    computed 内部的属性在使用的时候，不能加括号
                    computed 的属性必须要返回内容，将来组件中不返回会报错
                    vue 在定义 计算属性的时候，用的是 Object.defineProperty()
                    计算属性的优点是，当第一次获取属性值之后，会把值放入缓存，下次再使用时不会重新执行函数

                    ps: 当计算属性内部的数据发生更改，依然会重新执行函数

            computed 更擅长处理多次访问相同的动态数据这种场景。
     -->
    <div id="demo">
        <div class="container">
            <h3>拼接姓名</h3>
            <hr>
            <form action="#" class="form-inline">
                <p class="from-group">
                    <button class="btn btn-primary" type="button" @click="num++">
                        点击增加 <span class="badge">{{ num }}</span>
                    </button>
                </p>
                <p class="from-group">
                    <label>
                        <span>姓氏：</span>
                        <input type="text" class="form-control" v-model="firName">
                    </label>
                </p>
                <p class="from-group">
                    <label>
                        <span>名字：</span>
                        <input type="text" class="form-control" v-model="lastName">
                    </label>
                </p>
            </form>

            <!-- <p class="bg-success tips">{{ fullName() }}</p> -->
            <p class="bg-success tips">{{ getFullName }}</p>
            <!-- <p class="bg-success tips">{{ getFullName }}</p>
            <p class="bg-success tips">{{ getFullName }}</p>
            <p class="bg-success tips">{{ getFullName }}</p> -->
        </div>
    </div>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
    
        const vm = new Vue({
            el: '#demo',
            data: {
                firName: '',
                lastName: '',
                num: 0
            },
            // methods 专门存放一些事件和方法函数
            methods: {
                fullName() {
                    console.log(111)

                    let s1 = this.firName && this.firName[0].toUpperCase() + this.firName.slice(1)
                    let s2 = this.lastName && this.lastName[0].toUpperCase() + this.lastName.slice(1)
                    // 在页面中调用函数，通过返回值给dom填充内容
                    return s1 + ' - ' + s2
                }
            },
            // ***** 计算属性 computed
            computed: {
                // 写法1：给计算属性声明一个对象
                getFullName: {
                    get() {
                        console.log('执行了计算属性')

                        let s1 = this.firName && this.firName[0].toUpperCase() + this.firName.slice(1)
                        let s2 = this.lastName && this.lastName[0].toUpperCase() + this.lastName.slice(1)
                        // 在页面中调用函数，通过返回值给dom填充内容
                        return s1 + ' - ' + s2
                    },
                    // 大部分场景没有那个必要去修改计算属性的值
                    set(val) {
                        console.log(val)
                        this.firName = 'lebrow'
                        this.lastName = 'james'
                    }
                }
            }
        })

        // console.log(vm)
    </script>
</body>
</html>